import React from "react";
import { Button, Form, Input, Switch, Toast } from "antd-mobile";
import { instance } from "../../utils/request";
import { useNavigate } from "react-router-dom";
const Login = () => {
  const navigate = useNavigate()
  const onFinish = async (value) => {
    if(!value.state) {
      // 提示
      Toast.show("请勾选协议")
      return ;
    }
    const resp = await instance.post("/login", value);

    const { code, message, data } = resp.data;
    if(code === 10000) {
      navigate('/')
      Toast.show(message)
      localStorage.setItem('token', data.accessToken)
      localStorage.setItem('userInfo', JSON.stringify(data.userInfo))
    } else {
      Toast.show(message)
    }
  };
  return (
    <div>
      <Form
        onFinish={onFinish}
        footer={
          <Button block color="primary" type="submit">
            登录
          </Button>
        }
      >
        <Form.Item
          label="手机号"
          name="username"
          rules={[
            {
              required: true,
              message: "手机号不可以为空",
            },
            {
              pattern: /^1[3-9]\d{9}$/,
              message: "请输入正确格式手机号",
            },
          ]}
        >
          <Input name="username" placeholder="请输入手机号"></Input>
        </Form.Item>
        <Form.Item
          label="密码"
          name="password"
          rules={[
            {
              required: true,
              message: "密码不可以为空",
            },
          ]}
        >
          <Input name="password" placeholder="请输入密码"></Input>
        </Form.Item>
        <Form.Item name="state" label="协议" layout="horizontal">
          <Switch></Switch>
        </Form.Item>
      </Form>
    </div>
  );
};

export default Login;
